<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles/layout.css">
   
</head>

<body>
    <h1>Web Desgin</h1>
    <p>These are the things you should know.</p>
    <ol id="linklist">
        <li>
            <a href="s.html">Structure</a>
        </li>
        <li>
            <a href="p.html">Presentation</a>
        </li>
        <li>
            <a href="b.html">Behavior</a>
        </li>
    </ol>
    <div id="slideshow">
        <img src="images/预览.png" alt="building blocks of web design" id="preview">
    </div>

    <script src="js/moveElement.js"></script>
    <script>
        window.onload = function () {
            prepareSlideshow();
        }

        function prepareSlideshow() {
            //确保浏览器支持DOM方法
            if (!document.getElementsByTagName) return false;
            if (!document.getElementById) return false;
            //确保元素存在
            if (!document.getElementById("linklist")) return false;
            if (!document.getElementById("preview")) return false;
            //为图片应用样式
            var preview = document.getElementById("preview");
            //取得表中所有链接
            var list = document.getElementById("linklist");
            var links = list.getElementsByTagName("a");
            //为mouseover时间添加动画效果
            links[0].onmouseover = function () {
                moveElement("preview", -100, 0, 10)
            }
            links[1].onmouseover = function () {
                moveElement("preview", -200, 0, 10)
            }
            links[2].onmouseover = function () {
                moveElement("preview", -300, 0, 10)
            }
        }



    </script>
</body>

</html>